Today, In this article, I have created a program that will allow you to Select/Deselect all the CheckBoxes of a GridView Row from the GridView Header CheckBox.
For performing this task, I have taken a GridView Control and bind it with the Data Source.
I have used ASP Template Field to Insert a CheckBox Control at the initial of every GridView row.
The following are the code that I have used to create a GridView with CheckBox in each of its rows and also in its Header.
Create the Following User Interface:
Here is the JavaScript Code to which enables us to Check all CheckBoxes from GridView Header CheckBox.
<script type="text/javascript">
function SelectheaderCheckboxes(headerchk)
{
var gvcheck = document.getElementById('GridViewShowRecords');
var i;
//Condition to check header checkbox selected or not if that is true checked all checkboxes
if (headerchk.checked) {
for (i = 0; i < gvcheck.rows.length; i++)
{
var inputs = gvcheck.rows[i].getElementsByTagName('input');
inputs[0].checked = true;
}
}
//if condition fails uncheck all checkboxes in gridview
else
{
for (i = 0; i < gvcheck.rows.length; i++)
{
var inputs = gvcheck.rows[i].getElementsByTagName('input');
inputs[0].checked = false;
}
}
Selectchildcheckboxes(headerchk);
}
//function to check header checkbox based on child checkboxes condition
function Selectchildcheckboxes(header)
{
var ck = header;
var count = 0;
var gvcheck = document.getElementById('GridViewShowRecords');
var headerchk = document.getElementById(header);
var rowcount = gvcheck.rows.length;
//By using this for loop we will count how many checkboxes has checked
for (i = 1; i < gvcheck.rows.length; i++)
{
var inputs = gvcheck.rows[i].getElementsByTagName('input');
if (inputs[0].checked)
{
count++;
}
}
//Condition to check all the checkboxes selected or not
if (count == rowcount - 1) {
headerchk.checked = true;
}
else
{
headerchk.checked = false;
}
}
</script>
Here is the final code of the .aspx page
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ShowRecords.aspx.cs" Inherits="ShowRecords"
Debug="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>List of All Records</title>
<script type="text/javascript">
function SelectheaderCheckboxes(headerchk)
{
var gvcheck = document.getElementById('GridViewShowRecords');
var i;
//Condition to check header checkbox selected or not if that is true checked all checkboxes
if (headerchk.checked) {
for (i = 0; i < gvcheck.rows.length; i++)
{
var inputs = gvcheck.rows[i].getElementsByTagName('input');
inputs[0].checked = true;
}
}
//if condition fails uncheck all checkboxes in gridview
else
{
for (i = 0; i < gvcheck.rows.length; i++)
{
var inputs = gvcheck.rows[i].getElementsByTagName('input');
inputs[0].checked = false;
}
}
Selectchildcheckboxes(headerchk);
}
//function to check header checkbox based on child checkboxes condition
function Selectchildcheckboxes(header)
{
var ck = header;
var count = 0;
var gvcheck = document.getElementById('GridViewShowRecords');
var headerchk = document.getElementById(header);
var rowcount = gvcheck.rows.length;
//By using this for loop we will count how many checkboxes has checked
for (i = 1; i < gvcheck.rows.length; i++)
{
var inputs = gvcheck.rows[i].getElementsByTagName('input');
if (inputs[0].checked)
{
count++;
}
}
//Condition to check all the checkboxes selected or not
if (count == rowcount - 1) {
headerchk.checked = true;
}
else
{
headerchk.checked = false;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="margin: 0 auto;" width="1100px">
<table style="margin: 0 auto;" width="1100px">
<tr>
<td>
<asp:Label ID="Label2" runat="server" Font-Bold="True" Font-Names="Georgia" Text="Check all CheckBoxes in GridView"></asp:Label>
</td>
</tr>
<tr>
<td bgcolor="#6699FF" align="center">
<asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Names="Georgia" ForeColor="White"
Text="List of All Records"></asp:Label>
</td>
</tr>
<tr>
<td align="center">
<asp:GridView ID="GridViewShowRecords" runat="server" BackColor="White" BorderColor="#DEDFDE"
BorderStyle="None" BorderWidth="1px" CellPadding="4" EnableModelValidation="True"
ForeColor="Black" GridLines="Vertical" AutoGenerateColumns="false"
onrowdatabound="GridViewShowRecords_RowDataBound">
<AlternatingRowStyle BackColor="White" />
<FooterStyle BackColor="#CCCC99" />
<HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
<RowStyle BackColor="#F7F7DE" />
<SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox runat="server" ID="chkAll" onclick="SelectheaderCheckboxes(this)" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox runat="server" ID="chkMember" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
ID</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lblUserID" runat="server" Text='<%#Bind("UserId") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtUserID" Text='<%#Bind("UserId") %>' runat="server" Width="20px"
Enabled="False"></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
FirstName</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lblFirstName" runat="server" Text='<%#Bind("FName") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtFirstName" Text='<%#Bind("FName") %>' runat="server" Width="80px"></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
LastName</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lblLastName" runat="server" Text='<%#Bind("LName") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtLastName" Text='<%#Bind("LName") %>' runat="server" Width="80px"></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
FatherName</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lblFatherName" runat="server" Text='<%#Bind("FatherName") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtFatherName" Text='<%#Bind("FatherName") %>' runat="server" Width="100px"></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
Age</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lblAge" runat="server" Text='<%#Bind("Age") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtAge" Text='<%#Bind("Age") %>' runat="server" Width="30px"></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
Address</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lblAddress" runat="server" Text='<%#Bind("Address") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtAddress" Text='<%#Bind("Address") %>' runat="server" Width="150px"></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
Phone</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lblPhone" runat="server" Text='<%#Bind("Phone") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtPhone" Text='<%#Bind("Phone") %>' runat="server" Width="80px"></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
Email</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lblEmail" runat="server" Text='<%#Bind("Email") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtEmail" Text='<%#Bind("Email") %>' runat="server" Width="120px"></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
<hr style="border-color: #6699FF" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Now, Code for .aspx.cs page: using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.IO;
public partial class ShowRecords : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{ if (!IsPostBack)
{ //Binding the GridView
BindGridViewShowRecords();
}
}
private void BindGridViewShowRecords()
{
//Creating Connection and Binding the GridView
connection.con = new System.Data.SqlClient.SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["MyConnectionString"].ConnectionString);
connection.con.Open();
string query = "select * from tblUserInfo";
connection.da = new System.Data.SqlClient.SqlDataAdapter(query, connection.con);
connection.bui = new SqlCommandBuilder(connection.da);
connection.dt = new System.Data.DataTable();
connection.da.Fill(connection.dt);
GridViewShowRecords.DataSource = connection.dt;
GridViewShowRecords.DataBind(); }
protected void GridViewShowRecords_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{ CheckBox headerchk = (CheckBox)GridViewShowRecords.HeaderRow.FindControl("chkAll");
CheckBox childchk = (CheckBox)e.Row.FindControl("chkMember");
childchk.Attributes.Add("onclick", "javascript:Selectchildcheckboxes('" + headerchk.ClientID + "')");
}
}
}
Don’t forget to Create SQLServer Connection. Here I have done this using web.config file. Simply add a tag <connectionStrings></connectionStrings> in your web.config file as follows:
<connectionStrings>
<add name="MyConnectionString"connectionString="Data Source=.\mindstick;Initial Catalog=test_mindStick;User ID=sa;Password=mindstick;MultipleActiveResultSets=true"providerName="System.Data.SqlClient"/>
</connectionStrings>
Leave Comment